<template>
	<view class="page">
		<xzfx-panel title="联系人信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系人</view>
					<view class="xzfx-form-value">
						<input v-model="form.contackName" type="text" maxlength="100" placeholder="请输入联系人姓名" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系电话</view>
					<view class="xzfx-form-value">
						<input v-model="form.contackPhone" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">看车地点</view>
					<view class="xzfx-form-value xzfx-form-custom" @click.stop="getMap">
						<view v-if="form.location" class="input-val">{{ form.location || "" }}</view>
						<view v-else class="input-val placeholder">请选择看车地点</view>
						<view class="input-icon xzfx_icon_location"></view>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="车辆信息" isCard>
			<view class="xzfx-form" slot="content">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车辆品牌</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.truckBrand" mode="selector" title="车辆品牌" placeholder="请选择车辆品牌" :range="$dict('truckBrand')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车辆类型</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.truckType" mode="selector" title="车辆类型" placeholder="请选择车辆类型" :range="$dict('truckType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车主报价</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.quotePrice" type="digit" placeholder="请输入车主报价" maxlength="9" placeholder-class="placeholder" style="width: calc(100% - 80rpx);">
						<view style="text-align: right;width: 80rpx;font-size: 30rpx;">万元</view>
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">上牌时间</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.licenceDate" mode="date" fields="month" title="上牌时间" placeholder="请选择上牌时间" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">是否可过户</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.transferStatus" mode="selector" title="是否可过户" placeholder="请选择是否可过户" :range="$dict('transferStatus')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车辆颜色</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.color" mode="selector" title="车辆颜色" placeholder="请选择车辆颜色" :range="$dict('color')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">车架号</view>
					<view class="xzfx-form-value">
						<input type="text" v-model="form.vinCode" mode="selector" title="车架号" placeholder="请输入车架号" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">出厂日期</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.productDate" mode="date" title="出厂日期" placeholder="请选择出厂日期" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">变速箱品牌</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.gearboxBrand" mode="selector" title="变速箱品牌" placeholder="请选择变速箱品牌" :range="$dict('gearboxBrand')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">轻重体</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.loadType" mode="selector" title="轻重体" placeholder="请选择轻重体" :range="$dict('loadType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">是否有保险</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.insureStatus" mode="selector" title="是否有保险" placeholder="请选择是否有保险" :range="$dict('insureStatus')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">变速箱档位</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.gearboxTrans" mode="selector" title="变速箱档位" placeholder="请选择变速箱档位" :range="$dict('gearboxTrans')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">年检到期时间</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.checkEndDate" mode="date" fields="month" title="年检到期时间" placeholder="请选择年检到期时间" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">排放标准</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.emissionStandard" mode="selector" title="排放标准" placeholder="请选择排放标准" :range="$dict('emissionStandard')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">驱动形式</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.driveType" mode="selector" title="驱动形式" placeholder="请选择驱动形式" :range="$dict('driveType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">发动机品牌</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.engineBrand" mode="selector" title="发动机品牌" placeholder="请选择发动机品牌" :range="$dict('engineBrand')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">燃料类型</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.fuelType" mode="selector" title="燃料类型" placeholder="请选择燃料类型" :range="$dict('fuelType')" />
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">最大马力</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.maxPower" type="number" maxlength="3" placeholder="请输入最大马力" placeholder-class="placeholder" style="width: calc(100% - 110rpx);">
						<view style="text-align: right;width: 110rpx;font-size: 30rpx;">匹以上</view>
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">表里程</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="form.showMiles" type="number" maxlength="6" placeholder="请输入表里程" placeholder-class="placeholder" style="width: calc(100% - 110rpx);">
						<view style="text-align: right;width: 110rpx;font-size: 30rpx;">万公里</view>
					</view>
				</view>
				
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">是否个人</view>
					<view class="xzfx-form-value">
						<xzfx-select-input v-model="form.personalStatus" mode="selector" title="是否个人" placeholder="请选择是否个人" :range="$dict('personalStatus')" />
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="车辆图片" subTitle="最少1张，最多10张" isCard>
			<view class="xzfx-form-images" slot="content">
				<view class="image" v-for="(item,index) in form.photos" :key="index">
					<view class="delete-btn xzfx_icon_close" @click.stop="deleteFn(index)"></view>
					<image :src="item"></image>
				</view>
				<view v-if="form.photos.length < 10" class="button" @click.stop="$checkLogin(uploadFn)"></view>
			</view>
		</xzfx-panel>
		<xzfx-panel title="车辆描述" subTitle="选填" isCard>
			<textarea v-model="form.remark" class="other-requirement" slot="content" maxlength="200" placeholder="请输入车辆描述(200字)" placeholder-class="placeholder" />
		</xzfx-panel>
		<xzfx-panel title="保养记录" subTitle="选填" isCard>
			<textarea v-model="form.maintain" class="other-requirement" slot="content" maxlength="200" placeholder="请输入保养记录(200字)" placeholder-class="placeholder" />
		</xzfx-panel>
		<view class="submit-button" @click.stop="$checkLogin(submitFn)">提 交 车 辆</view>
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				form: {
					contackName: "",
					contackPhone: "",
					province: "",
					city: "",
					district: "",
					location: "",
					truckType: "",
					truckBrand: "",
					quotePrice: "",
					licenceDate: "",
					transferStatus: "",
					color: "",
					vinCode: "",
					productDate: "",
					gearboxBrand: "",
					loadType: "",
					insureStatus: "",
					gearboxTrans: "",
					checkEndDate: "",
					emissionStandard: "",
					driveType: "",
					engineBrand: "",
					fuelType: "",
					maxPower: "",
					showMiles: "",
					personalStatus: "",
					photos: [],
					remark: "",
					maintain: ""
				},
				tips: {
					contackName: "请输入联系人",
					contackPhone: "请输入联系电话",
					location: "请选择看车地点",
					truckBrand: "请选择车辆品牌",
					truckType: "请选择车型",
					quotePrice: "请输入车主报价",
					licenceDate: "请选择上牌时间",
					transferStatus: "请选择是否可过户",
					color: "请选择颜色",
					vinCode: "请输入车架号",
					productDate: "请选择出厂日期",
					gearboxBrand: "请选择变速箱品牌",
					loadType: "请选择轻重体",
					insureStatus: "请选择是否有保险",
					gearboxTrans: "请选择变速箱档位",
					checkEndDate: "请选择年检到期时间",
					emissionStandard: "请选择排放标准",
					driveType: "请选择驱动形式",
					engineBrand: "请选择发动机品牌",
					fuelType: "请选择燃料类型",
					maxPower: "请输入最大马力",
					showMiles: "请输入车表里程",
					personalStatus: "请选择是否个人"
				}
			};
		},
		onUnload () {
			chooseLocation.setLocation(null);
		},
		onShow() {
			const location = chooseLocation.getLocation();
			if(location){
				this.form.province = location.province;
				this.form.city = location.city;
				this.form.district = location.district;
				this.form.location = location.address + location.name;
			}
		},
		methods: {
			getMap(){
				let key = 'XKEBZ-XT6AM-UMS6B-6VEJQ-INKE6-UYFAH'; //使用在腾讯位置服务申请的key
				let referer = '百川海融小程序'; //调用插件的app的名称
				let location = {};
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						location = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					},
					fail: (error) => {
						wx.navigateTo({
							url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + JSON.stringify(location)
						});
					}
				})
			},
			deleteFn(index){
				this.form.photos.splice(index, 1)
			},
			uploadFn(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					extension: ['.jpg', '.png', '.jpeg'],
					success: (res) => {
						this.$utils.system.loading("上传中，请稍后");
						uni.uploadFile({
							url: 'https://api.sxbchr.com/bchr/app/config/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								"X-Access-Token": uni.getStorageSync("token") || ""
							},
							success: (response) => {
								if(response.statusCode === 200){
									let data = JSON.parse(response.data)
									if(data.code === 200){
										this.form.photos.push(data.message)
									}else{
										this.$utils.system.tip("上传失败");
									}
								}else{
									this.$utils.system.tip("上传失败");
								}
							},
							fail: (error) => {
								this.$utils.system.tip("上传失败");
							},
							complete: () => {
								uni.hideLoading()
							}
						});
					}
				});
			},
			submitFn(){
				let keys = Object.keys(this.tips);
				for (var i = 0; i < keys.length; i++) {
					if(!this.form[keys[i]]){
						this.$utils.system.tip(this.tips[keys[i]]);
						return
					}
				}
				if(!this.$utils.valid.phone(this.form.contackPhone)){
					this.$utils.system.tip("请输入合法的手机号");
					return
				}
				if(this.form.photos.length < 1){
					this.$utils.system.tip("请至少上传1张图片");
					return
				}
				let obj = JSON.parse(JSON.stringify(this.form))
				obj.licenceDate = obj.licenceDate + "-01"
				obj.checkEndDate = obj.checkEndDate + "-01"
				obj.photos = obj.photos.join(",");
				this.$utils.system.loading("正在提交，请稍后");
				this.$apis.carSale.submit(obj).then(res => {
					this.$utils.system.tip('提交成功');
					Object.keys(this.form).forEach(item => {
						this.form[item] = ""
					})
					this.form.photos = [];
					uni.navigateBack({ delta: 2 });
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 3000)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 100rpx;
	}
	.xzfx-form{
		padding-top: 20rpx;
		.xzfx-form-item{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #f1f1f1;
			.xzfx-form-label{
				position: relative;
				width: 220rpx;
				padding-left: 18rpx;
				font-size: 30rpx;
				color: #333333;
			}
			.required::before{
				position: absolute;
				left: 0;
				content: "*";
				color: red;
			}
			.xzfx-form-value{
				width: calc(100% - 220rpx);
				input{
					text-align: right;
				}
			}
			.xzfx-form-custom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.input-val{
					width: calc(100% - 40rpx);
					font-size: 30rpx;
					color: #333333;
					text-align: right;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.input-icon{
					width: 40rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;
					font-size: 32rpx;
				}
			}
		}
		.xzfx-form-item:first-child{
			border-top: none;
		}
	}
	.xzfx-form-images{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		gap: $xzfx-spacing;
		padding-top: $xzfx-spacing;
		padding-bottom: $xzfx-spacing;
		.image, .button {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
			font-weight: 600;
			border-radius: 10rpx;
			overflow: hidden;
			.delete-btn{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom-left-radius: 10rpx;
				font-size: 28rpx;
				font-weight: 100;
				background-color: rgba(0, 0, 0, 0.5);
				color: #ffffff;
			}
			image {
				position: absolute;
			}
		}
		.button{
			position: relative;
			color: #8ba2b0;
			border: 1rpx solid #eaeaea;
		}
		.image::after {
			content: "";
			display: block;
			width: 100%;
			padding-bottom: 100%;
		}
		.button::after {
			content: "";
			display: block;
			width: 100%;
			padding-bottom: 100%;
		}
		.button:before {
			position: absolute;
			content: "\e63b";
			text-align: center;
			font-family: "iconfont" !important;
		}
	}
	.other-requirement{
		width: 100%;
		height: 200rpx;
		margin-top: $xzfx-spacing;
	}
	.submit-button {
		margin: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 46rpx;
		background: $xzfx-theme;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 0 40rpx;
		overflow: hidden;
	}
</style>
